<template>
  <view style="">
    <view class="Main">
      <view class="flex proje">
        <view class="Name">店铺名称：</view>
        <input
          class="Input"
          maxlength="20"
          type="text"
          placeholder="请输入店铺名称"
        />
      </view>
      <view class="flex proje">
        <view class="Name">店铺类型：</view>
        <view class="ClassBox flex">
          <picker
            @change="bindPickerChange"
            :range="array"
            style="width: 500rpx"
          >
            <label class="">{{ array[index] }}</label>
          </picker>
          <image class="down" src="/static/images/down.png" mode=""></image>
        </view>
      </view>
      <view class="flex proje" style="align-items: flex-start">
        <view class="Name">店铺简介：</view>
        <textarea maxlength="120" class="textar" placeholder="" />
      </view>
      <view class="flex proje">
        <view class="Name">企业名称：</view>
        <input
          class="Input"
          maxlength="30"
          type="text"
          placeholder="请输入完整企业名称"
        />
      </view>
      <view class="flex proje">
        <view class="Name">企业联系人姓名：</view>
        <input
          class="Input"
          maxlength="12"
          type="text"
          placeholder="请输入真实姓名"
        />
      </view>
      <view class="flex proje">
        <view class="Name">企业联系电话：</view>
        <input
          class="Input"
          type="number"
          maxlength="11"
          placeholder="请输入手机号码"
        />
      </view>
      <view class="proje">
        <view class="Name">企业资质证书：</view>
        <image
          class="zzIco"
          src="/pagesC/static/images/Addzz.png"
          mode=""
        ></image>
      </view>

      <view class="chenkeduser_box_pent">
        <view
          class="chenkeduser_box"
          :class="{ ifchenkedactive: ifchenked }"
          @click="ifchen"
        >
          <view class="chenkeduser_lebla">
            <image
              v-if="!ifchenked"
              src="/static/images/userchenk1.png"
              mode=""
            ></image>
            <image
              v-if="ifchenked"
              src="/static/images/yes_icon.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="" style="margin-left: 10upx">
          我已阅读并同意
          <text class="Agreement" @click="Agreement()"
            >《皖集采企业合作协议》</text
          >
        </view>
      </view>

      <view class="Submit"> 确认并提交 </view>
    </view>

    <uni-popup ref="Presale">
      <view class="PresaleBox">
        <view class="Title">商家主播（已有自己的店铺及商品）</view>
        <view class=""
          >1、店铺粉丝量达到1w、关注量达1w以上、店铺等级达到2级、店铺商品数量达到5件以上</view
        >
        <view class="">2、每月店铺成交单数达200单、成交额达到20000元</view>
        <view class=""
          >3、近30天品质原因退款率及笔数要求：品质原因退款订单不大于2笔</view
        >
        <view class="">4、近30天店铺投诉要求：投诉条数不超过2笔</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  components: {
    uniPopup,
  },
  data() {
    return {
      ifchenked: true,
      index: 0,
      array: ["请选择"],
    };
  },
  methods: {
    Agreement() {
      this.$refs.Presale.open();
    },
    bindPickerChange(e) {
      //分类选择
      this.index = e.target.value; //将数组改变索引赋给定义的index变量
    },
    ifchen() {
      this.ifchenked = !this.ifchenked;
    },
  },
};
</script>

<style>
.Title {
  text-align: center;
  font-size: 32rpx;
  color: #000;
  margin: 20rpx 0;
}
.PresaleBox {
  width: 600rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
}
.down {
  width: 24rpx;
  height: 12rpx;
}
.ClassBox {
  width: 500rpx;
  border: 1rpx solid #eeeeee;
  justify-content: space-between;
  padding: 10rpx 20rpx;
}
.Submit {
  width: 700rpx;
  margin: 0 auto;
  background-color: #ff3355;
  line-height: 85rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 45rpx;
  margin-bottom: 40rpx;
}
.Agreement {
  color: #ff3355;
}
.previous image {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
}
.chenkeduser_box_pent {
  display: flex;
  align-items: center;

  margin-top: 70upx;
  margin-left: 14upx;
}
.ifchenkedactive {
  background-image: -moz-linear-gradient(
    172deg,
    rgb(191, 2, 80) 0%,
    rgb(249, 29, 112) 100%
  );
  background-image: -webkit-linear-gradient(
    172deg,
    rgb(191, 2, 80) 0%,
    rgb(249, 29, 112) 100%
  );
  background-image: -ms-linear-gradient(
    172deg,
    rgb(191, 2, 80) 0%,
    rgb(249, 29, 112) 100%
  );
}

.chenkeduser_box {
  margin-right: 10upx;
  height: 24upx;
  width: 24upx;
  border-width: 1px;
  border-color: rgb(229, 229, 229);
  border-style: solid;
  border-radius: 2px;
  background-color: rgb(238, 238, 238);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chenkeduser_box image {
  position: absolute;
  height: 14upx;
  width: 20upx;
  top: 5upx;
  left: 2upx;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zzIco {
  width: 380rpx;
  height: 240rpx;
}
.textar {
  width: 500rpx;
  padding: 20rpx;
  border: 1rpx solid #eeeeee;
}
.Name {
  font-size: 30rpx;
  color: #333333;
  font-weight: bold;
}
.proje {
  margin: 20rpx 0;
  font-size: 28rpx;
}
.Input {
  font-size: 26rpx;
}
.Main {
  padding: 20rpx;
  background-color: #ffffff;
  margin-top: 10rpx;
}
.flex {
  display: flex;
  align-items: center;
}
</style>
